<div id="container">
  <aside>
    <header>
      <input type="text" placeholder="search">
    </header>
    <ul>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status orange"></span>
            offline
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_02.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_03.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status orange"></span>
            offline
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_04.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_05.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status orange"></span>
            offline
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_06.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_07.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_08.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_09.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status green"></span>
            online
          </h3>
        </div>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_10.jpg" alt="">
        <div>
          <h2>Prénom Nom</h2>
          <h3>
            <span class="status orange"></span>
            offline
          </h3>
        </div>
      </li>
    </ul>
  </aside>
  <main>
    <header>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
      <div>
        <h2>Chat with Vincent Porter</h2>
        <h3>already 1902 messages</h3>
      </div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
    </header>
    <ul id="chat">
      <li class="you">
        <div class="entete">
          <span class="status green"></span>
          <h2>Vincent</h2>
          <h3>10:12AM, Today</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </li>
      <li class="me">
        <div class="entete">
          <h3>10:12AM, Today</h3>
          <h2>Vincent</h2>
          <span class="status blue"></span>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </li>
      <li class="me">
        <div class="entete">
          <h3>10:12AM, Today</h3>
          <h2>Vincent</h2>
          <span class="status blue"></span>
        </div>
        <div class="triangle"></div>
        <div class="message">
          OK
        </div>
      </li>
      <li class="you">
        <div class="entete">
          <span class="status green"></span>
          <h2>Vincent</h2>
          <h3>10:12AM, Today</h3>
        </div>
        <div class="triangle"></div>
        <div class="message">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </li>
      <li class="me">
        <div class="entete">
          <h3>10:12AM, Today</h3>
          <h2>Vincent</h2>
          <span class="status blue"></span>
        </div>
        <div class="triangle"></div>
        <div class="message">
          有时父级容器盒子(div)高度不能自适应解决

          父级容器DIV盒子高度不能自适应一般是因为子级(儿子)使用了浮动(float)造成，也就是我们所常常说的产生了浮动。

          DIV CSS清除浮动让父级容器高度自适应解决这样方法有两种：
        </div>
      </li>
      <li class="me">
        <div class="entete">
          <h3>10:12AM, Today</h3>
          <h2>Vincent</h2>
          <span class="status blue"></span>
        </div>
        <div class="triangle"></div>
        <div class="message">
          OK
        </div>
      </li>
    </ul>
    <footer>
      <textarea placeholder="Type your message"></textarea>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
      <a >Send</a>
    </footer>
  </main>
</div>
